<template>
	<view class="content">
		
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<view class="search">
			<u-search placeholder="请输入关键词" v-model="getData.KeyWords"  @custom='search()' @search='search()'></u-search>
		</view>
		<view class="common-car">
			<view class="empty-shop-car" v-if="isEmpty">
				<image :src="image.empty_shop_car" class="empty-shop-car-image" mode=""></image>
				<text>当前您的服务项目是空的</text>
			</view>
			<view class="shop-car" v-else>
				<view class="store-box" v-for="(itemq,indexq) in datas" :key="indexq">
					<view class="goodsInfo" v-for="(itemw,indexw) in itemq.goods" :key="indexw">
						<image :src="image.select" v-if="itemw.checked == 2" class="checked-image"
							mode="" @tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
						<image :src="image.not_select" v-else class="checked-image" mode=""
							@tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
						<view class="goodsInfo-right">
							<image @tap="goodsCheck(indexq,indexw,itemw.checked)" :src="image.goods_avatar" class="goods-image" mode=""></image>
							<view class="goodsInfo-box">
								<text  @tap="goodsCheck(indexq,indexw,itemw.checked)" class="goods-name">{{itemw.ServiceName}}</text>
								<text  @tap="goodsCheck(indexq,indexw,itemw.checked)" class="spe">描述信息：{{itemw.ServiceDesc}}</text>
								<text  @tap="goodsCheck(indexq,indexw,itemw.checked)" class="spe">标签：{{ itemw.Label }}</text>
								<view class="goods-box">
									<text  @tap="goodsCheck(indexq,indexw,itemw.checked)" class="goods-price">单价：{{itemw.ServicePrice}}/{{itemw.ServiceUnitName}}</text>
									<view class="goods-num-box">
										<view class="goods-image" @tap="sub(indexq,indexw,itemw.counts)">
											<text>-</text>
										</view>
										<view class="goods-num">
											<text>{{itemw.counts}}</text>
										</view>
										<view class="goods-image" @tap="add(indexq,indexw,itemw.counts)">
											<text>+</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="statistics-box">
					<view class="statistics">
						<view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
							<image :src="image.select"  class="checked-image" mode="" >
							</image>
							<text>全选</text>
						</view>
						<view class="statistics-left" v-else @tap="allCheck">
							<image :src="image.not_select"  class="checked-image" mode="" >
							</image>
							<text>全选</text>
						</view>
						<view class="statistics-right" v-if="isCut">
							<text></text><text class="text-color"></text>
							<view  @tap="confirm" class="btn">
								<text>保存</text>
							</view>
						</view>
						<view class="statistics-right" v-else @tap="delect">
							<view class="btn">
								<text>删除</text>
							</view>
						</view>
					</view>
					<view class="gap"></view>
				</view>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				qrcodeId:'',
				sceneId:'',
				themeColor: '#0079FE',
				getData:{
					KeyWords:'',
				},
				title:'',
				//购物车
				isEmpty: true,
				iPhoneX: false,
				datas: [{
					name:'',
					checked:1,
					goods:[]
				}],
				statisticsIndex:false,
				total:0,
				isCut:true,
				chooseData:[],
				image:{
					empty_shop_car:this.$request22.baseUrl1+'/Resource/Sg/device/shopcar/empty_shop_car.png',
					goods_avatar:this.$request22.baseUrl1+'/Resource/Sg/spare/sparenodata.png',
					not_select:this.$request22.baseUrl1+'/Resource/Sg/device/shopcar/not_select.png',
					select:this.$request22.baseUrl1+'/Resource/Sg/device/shopcar/select.png',
					youjiantou1:this.$request22.baseUrl1+'/Resource/Sg/device/shopcar/youjiantou1.png',
				},
			}
		},
		components: {
		},
		onLoad(options) {
			var that=this
			that.queryList();
			
			that.sceneId=options.sceneId
			that.qrcodeId=options.qrcodeId
		},
		created() {
			
		},
		methods: {
			confirm(){
				console.log('confirm')
				let that=this
				let chooseData=[]
				//循环下
			    let list=this.datas[0].goods
				
				if(list.length>0){
					for(let i=0;i<list.length;i++){
						if(list[i].checked==2){
							//chooseData.push(list[i])
							let entity={
								ServiceId:list[i].Id,
								Counts:list[i].counts,
							}
							
							chooseData.push(entity)
						}
					}
					
					let opts = {
						url: 'SceneApi/AddQrcodeSceneService',
						method: 'POST'
					};
					let postData={
						QrcodeSceneServiceList:chooseData,
						SceneId:that.sceneId,
						Remark:'',
						qrcodeId:that.qrcodeId
					}
					console.log(postData)
					request.httpTokenRequest(opts,postData).then(res => {
						if(res.data.code == 1){
							uni.navigateBack({
								delta: 1
							})
						}
						else{
							uni.showToast({ title: res.data.msg, icon: 'none',duration:4000 });
						}
					});
				}else{
					uni.showToast({ title:'请选择服务项目', icon: 'none' ,duration:2000});
				}
				
				// uni.navigateBack({
				// 	delta: 1
				// })
				// uni.$emit('returnData',that.chooseData)
			},
			queryList() {
				var that = this;
				that.giveList=[]
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'SceneApi/GetQrcodeSceneServiceList',
					method: 'get'
				};
				request.httpTokenRequest(opts,that.getData).then(res => {
					if(res.data.code == 1){
						that.giveList=res.data.data;
						
						if(res.data.data.length>0){
							this.isEmpty = false
							for(let i =0;i<res.data.data.length;i++){
								let goodsItem=res.data.data[i]
								goodsItem.checked=1
								goodsItem.counts=1;
								that.datas[0].goods.push(goodsItem)
							}
						}else{
							this.isEmpty = true
						}
						
						uni.hideLoading();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			// 搜索框
			search(e){
				let that=this
				that.datas[0].goods=[];
				that.getData.PageIndex=1;
				that.getData.PageSize=999;
				that.getData.KeyWords=e
				this.queryList();
			},
			//商品选择
			goodsCheck(storeIndex, goodsIndex, goodsChecked) {
				if (goodsChecked == 1) {
					this.datas[storeIndex].goods[goodsIndex].checked = 2
				} else {
					this.datas[storeIndex].goods[goodsIndex].checked = 1
				}
				//判断是否该店铺全选
				let storeChecked = true
				this.datas[storeIndex].goods.map((item,index)=>{
					if(item.checked == 1){
						storeChecked = false
					}
				})
				if(storeChecked == false){
					this.datas[storeIndex].checked = 1
				}else{
					this.datas[storeIndex].checked = 2
				}
				
				//判断是否全选
				let statisticsIndex = true
				this.datas.find((item,index)=>{
					if(item.checked == 1){
						statisticsIndex = false
					}
				})
				if(statisticsIndex == false){
					this.statisticsIndex = false
				}else{
					this.statisticsIndex = true
				}
				
				this.statistics()
			},
			//店铺选择
			storeCheck(storeIndex,storeCheck){
				if(storeCheck == 1){
					this.datas[storeIndex].checked = 2
					this.datas[storeIndex].goods.find((item,index)=>{
						item.checked = 2
					})
				}else{
					this.datas[storeIndex].checked = 1
					this.datas[storeIndex].goods.find((item,index)=>{
						item.checked = 1
					})
				}
				//判断是否全选
				let statisticsIndex = true
				this.datas.find((item,index)=>{
					if(item.checked == 1){
						statisticsIndex = false
					}
				})
				if(statisticsIndex == false){
					this.statisticsIndex = false
				}else{
					this.statisticsIndex = true
				}
				this.statistics()
			},
			//减少
			sub(storeIndex, goodsIndex, goodsnum){
				console.log('sub')
				if(goodsnum == 1){
					return
				}else{
					this.datas[storeIndex].goods[goodsIndex].counts--
				console.log(this.datas[storeIndex].goods[goodsIndex].counts)
				}
				this.statistics()
			},
			//增加
			add(storeIndex, goodsIndex, goodsnum){
				console.log('add')
				this.datas[storeIndex].goods[goodsIndex].counts++
				console.log(this.datas[storeIndex].goods[goodsIndex].counts)
				this.statistics()
			},
			//全选
			allCheck(){
				if(this.statisticsIndex){
					this.datas.find((item,index)=>{
						item.checked = 1
						item.goods.find((itemq,indexq)=>{
							itemq.checked = 1
						})
					})
					this.statisticsIndex = false
				}else{
					this.datas.find((item,index)=>{
						item.checked = 2
						item.goods.find((itemq,indexq)=>{
							itemq.checked = 2
						})
					})
					this.statisticsIndex = true
				}
				this.statistics()
			},
			//统计
			statistics(){
			},
			cut(){
				this.isCut = !this.isCut
				this.statisticsIndex = true
				this.allCheck()
			},
			accounts(){
				let judge = this.judgeSelect()
				if(judge){
					this.$emit('delect',this.datas)
				}else{
					uni.showToast({
						title:'您当前未选择任何备件,结算失败',
						icon:'none'
					})
				}
			},
			delect(){
				let judge = this.judgeSelect()
				if(judge){
					this.$emit('delect',this.datas)
				}else{
					uni.showToast({
						title:'您当前未选择任何备件,删除失败',
						icon:'none'
					})
				}
				
			},
			judgeSelect(){
				let judge = false
				this.datas.find((item,index)=>{
					item.goods.find((itemq,indexq)=>{
						if(itemq.checked == 2){
							judge = true
						}
					})
				})
				return judge
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		width: 100%;
		height: 100rpx;
		padding: 20rpx 2% 0 2%;
		background-color: #fff;
	}
	.common-car {
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
		margin-top: 20rpx;
	}
	
	.empty-shop-car {
		width: 750rpx;
		min-height: 680rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.empty-shop-car-image {
			width: 340rpx;
			height: 278rpx;
			margin-top: 102rpx;
		}
	
		text {
			margin-top: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}
	
		.empty-shop-car-btn {
			width: 240rpx;
			height: 90rpx;
			background: #0081ff;
			color: #FFFFFF;
			border-radius: 200rpx;
			margin-top: 40rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 400;
		}
	}
	
	.shop-car {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.shop-car-header {
			width: 690rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
	
			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;
			}
		}
	
		.store-box {
			width: 750rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
	
			.store-header {
				width: 690rpx;
				height: 78rpx;
				padding: 0 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;
	
				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}
	
				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #313133;
					margin-left: 20rpx;
				}
	
				.label {
					width: 14rpx;
					height: 24rpx;
					margin-left: 10rpx;
					margin-top: 5rpx;
				}
			}
	
			.goodsInfo {
				width: 690rpx;
				height: 246rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2rpx solid #EDEDED;
	
				&:nth-last-child(1) {
					border: none;
				}
	
				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}
	
				.goodsInfo-right {
					width: 634rpx;
					height: 246rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
	
					.goods-image {
						width: 180rpx;
						height: 180rpx;
					}
	
					.goodsInfo-box {
						width: 428rpx;
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
	
						.goods-name {
							width: 428rpx;
							font-size: 32rpx;
							font-weight: 600;
							color: #313133;
							
						}
	
						.spe {
							width: 428rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #919298;
						}
	
						.goods-box {
							width: 428rpx;
							margin-top: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
	
							.goods-price {
								font-size: 30rpx;
								font-weight: 400;
								color: #e7612e;
							}
	
							.goods-num-box {
								width: 168rpx;
								height: 46rpx;
								display: flex;
								flex-direction: row;
								align-items: center;
	
								.goods-image {
									width: 46rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									border: 1rpx solid #CFCFCF;
									font-size: 38rpx;
								}
	
								.goods-num {
									width: 76rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									font-size: 33rpx;
									font-weight: 400;
									color: #666666;
									border-top: 1px solid #CFCFCF;
									border-bottom: 1px solid #CFCFCF;
								}
							}
						}
					}
				}
			}
		}
	
		.statistics-box {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
	
			.statistics {
				width: 720rpx;
				padding: 0 0 0 30rpx;
				height: 98rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
	
				.statistics-left {
					width: 120rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
	
					image {
						width: 36rpx;
						height: 36rpx;
					}
	
					text {
						font-size: 30rpx;
						font-weight: 400;
						color: #313133;
					}
				}
	
				.statistics-right {
					width: 600rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
	
					.btn {
						width: 218rpx;
						height: 98rpx;
						background: #0081ff;
						color: white;
						text-align: center;
						line-height: 98rpx;
						font-size: 30rpx;
						font-weight: 400;
						margin-left: 40rpx;
					}
	
					text {
						font-size: 30rpx;
						font-weight: 400;
						color: white;
					}
	
					.text-color {
						color: rgba(242, 18, 18, 1);
					}
				}
			}
	
			.gap {
				width: 750rpx;
				height: 40rpx;
			}
		}
	}
</style>
